import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { TabBar } from '../../components';
import api from '../../../../shared/api';
import './index.css';

interface Category {
  id: string;
  name: string;
  icon: string;
  sort: number;
  status: string;
  subcategories?: Array<{
    id: string;
    name: string;
    icon: string;
  }>;
}

const tabBarItems = [
  { key: 'home', title: '首页', icon: '🏠', activeIcon: '🏠', path: '/mall/' },
  { key: 'category', title: '分类', icon: '📋', activeIcon: '📋', path: '/mall/category' },
  { key: 'cart', title: '购物车', icon: '🛒', activeIcon: '🛒', path: '/mall/cart' },
  { key: 'profile', title: '我的', icon: '👤', activeIcon: '👤', path: '/mall/profile' }
];

const CategoryPage: React.FC = () => {
  const navigate = useNavigate();
  const [categories, setCategories] = useState<Category[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
  const [loading, setLoading] = useState(true);

  // 加载分类数据
  useEffect(() => {
    const loadCategories = async () => {
      try {
        setLoading(true);
        const categoriesData = await api.product.getCategories();
        setCategories(categoriesData);
        
        // 默认选中第一个分类
        if (categoriesData.length > 0) {
          setSelectedCategory(categoriesData[0]);
        }
      } catch (error) {
        console.error('加载分类数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    loadCategories();
  }, []);

  const handleCategoryClick = (category: Category) => {
    setSelectedCategory(category);
  };

  const handleSubcategoryClick = (subcategory: any) => {
    // 跳转到商品列表页面，传递分类ID
    navigate(`/mall/products?categoryId=${subcategory.id}&categoryName=${encodeURIComponent(subcategory.name)}`);
  };

  if (loading) {
    return (
      <div className="category-page">
        <div className="category-page__loading">
          <div>加载中...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="category-page">
      {/* 头部标题 */}
      <div className="category-page__header">
        <div className="category-page__title">分类</div>
      </div>

      {/* 分类内容 */}
      <div className="category-page__content">
        {/* 左侧分类列表 */}
        <div className="category-page__sidebar">
          {categories.map((category) => (
            <div
              key={category.id}
              className={`category-page__category-item ${
                selectedCategory?.id === category.id ? 'active' : ''
              }`}
              onClick={() => handleCategoryClick(category)}
            >
              <div className="category-page__category-name">{category.name}</div>
            </div>
          ))}
        </div>

        {/* 右侧子分类网格 */}
        <div className="category-page__main">
          {selectedCategory && (
            <>
              <div className="category-page__main-title">
                {selectedCategory.name}
              </div>
              
              <div className="category-page__subcategory-grid">
                {selectedCategory.subcategories?.map((subcategory) => (
                  <div
                    key={subcategory.id}
                    className="category-page__subcategory-item"
                    onClick={() => handleSubcategoryClick(subcategory)}
                  >
                    <div className="category-page__subcategory-icon">
                      {subcategory.icon}
                    </div>
                    <div className="category-page__subcategory-name">
                      {subcategory.name}
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </div>

      {/* 底部导航 */}
      <TabBar tabs={tabBarItems} />
    </div>
  );
};

export default CategoryPage; 